<script setup>
import TopButtonCenter from "@/components/Pengyq/TopButtonCenter.vue";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useUseStore } from "@/stores/user";
import { insectBuyerDataAPI, selectAllAddressAPI } from "@/server/api/BuyerData";
import { ToastFun } from "@/hook/toast";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
//实例化方法
const router = useRouter();
const useStore = useUseStore();
// 定义添加方法
const insectBuyerData = async (data) => {
  ToastFun("Loading", { duration: 1000 });
  const res = await insectBuyerDataAPI(data);
  console.log(res);
  if (res.data.code === 200) {
    ToastFun("", {});
    router.push({
      path: `MeView`,
    });
  }
};

const finish = () => {
  let data = {
    address: from.value.address,
    phone: from.value.phone,
    userId: useStore.userId,
    userName: from.value.userName,
  };
  insectBuyerData(data);
};
const getAdders = () => {
  console.log("获取位置");
};
// 定义接受数据
const from = ref({
  userName: "",
  phone: "",
  address: "",
});
</script>

<template>
  <TopButtonCenter :title="$t('me.addNewAddress.title')" />

  <div class="addNewAddress">
    <ul>
      <li>
        <label class="cut-txt"> {{ $t("me.addNewAddress.name") }} </label>
        <input type="text" v-model="from.userName"
          :rules="[{ required: true, message: $t('me.addNewAddress.setName') }]" />
      </li>
      <li>
        <label class="cut-txt"> {{ $t("me.addNewAddress.phone") }} </label>
        <input type="text" v-model="from.phone" />
      </li>
      <!-- <li>
        <label class="cut-txt"> {{ $t("me.addNewAddress.loaction") }} </label>
        <input type="text" />
        <span class="icon" @click="getAdders">
          <van-icon name="location-o" size="15" />
        </span>
      </li> -->
      <li>
        <label class="cut-txt"> {{ $t("me.addNewAddress.address") }} </label>
        <input type="text" v-model="from.address" />
      </li>
    </ul>
    <footer @click="finish">{{ $t("me.addNewAddress.add") }}</footer>
  </div>
</template>

<style lang="scss" scoped>
.addNewAddress {
  font-size: 14rem;
  padding: 60rem 10rem 0;

  ul {
    padding: 10rem;

    li {
      position: relative;
      margin-bottom: 20rem;
      display: flex;
      justify-content: space-between;

      label {
        line-height: 40rem;
        width: 70rem;
      }

      input {
        flex: 1;
        padding-left: 15rem;
        border: 0;
        background-color: #f5f5f5;
        border-radius: 10rem;
        height: 40rem;
      }

      .icon {
        top: 10rem;
        right: 10rem;
        position: absolute;
      }
    }
  }

  footer {
    position: absolute;
    bottom: 30rem;
    border-radius: 10rem;
    text-align: center;
    line-height: 40rem;
    color: #fff;
    font-size: 16rem;
    width: 90%;
    margin: 0 auto;
    height: 40rem;
    background-color: #642e8e;
  }
}
</style>
